<template>
  <el-upload
    action="#"
    ref="upload"
    list-type="picture-card"
    accept="image/*"
    :file-list="fileList"
    :auto-upload="false"
    :multiple="true"
    :on-change="handleChange"
  >
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" v-lazy="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</template>
<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import { Delete, Plus } from "@element-plus/icons-vue";

import type { UploadFile, UploadFiles, UploadInstance } from "element-plus";

const props = defineProps(["fileList"]);
const emits = defineEmits(["change", "delete"]);

// 删除图片开始
let uploadRef: UploadInstance;
onMounted(() => {
  uploadRef = getCurrentInstance()?.proxy?.$refs.upload as UploadInstance;
  // console.log(uploadRef);
});
const handleRemove = (file: UploadFile) => {
  // uploadRef?.handleRemove(file);
  // console.log(file);
  emits("delete", file);
};
// 删除图片结束

const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  // console.log(uploadFile);
  console.log(uploadFiles);

  emits("change", uploadFiles, uploadFile);
};
</script>

<style lang="less" scoped>
:deep(.el-upload--picture-card) {
  width: 64px;
  height: 64px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 64px;
  height: 64px;
}
</style>
